<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="50%"
    @close="centerDialogVisible"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select v-model="form.manager" placeholder="请选择" value="1">
          <el-option
            v-for="item in simpleList"
            :key="item.id"
            :label="item.username"
            :value="item.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="centerDialogVisible">取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { reqGetSimpleList } from '@/api/user'
import { reqAddDept, reqGetDeptInfoByID, reqUpdeteDept } from '@/api/departrents'
export default {
  name: 'AddDetps',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    deptsList: {
      type: Object,
      required: true
    },
    sourceDepts: {
      type: Array,
      required: true
    }
  },
  data() {
    // 自定义部门名称
    var validateName = (rule, value, callback) => {
      // 第一种判断方法
      if (this.form.id && this.deptsList.name === value) return callback()
      const boo = this.sourceDepts.some(item => item.name === value)
      return boo ? callback(`已经存在${value}部门`) : callback()
      // 第二种判断方法
      // // 判断是否有子元素，有子元素才进行校验
      // if (this.deptsList.children.length > 0) {
      //   const names = this.deptsList.children.map((item) => {
      //     return item.name
      //   })

      //   console.log(names)
      //   // 判断当前填入的名称是否在已有名称当中
      //   if (names.includes(value)) { // 表示已存在
      //     callback(new Error('该部门已存在'))
      //   }
      // }
      // callback()
    }
    // 自定义部门编码
    const validateCode = (rule, value, callback) => {
      // 输入code的时候查看是否和已存在的code一样
      if (this.form.id && this.deptsList.code === value) return callback()
      const boo = this.sourceDepts.some(item => item.code === value)
      return boo ? callback(`已经存在${value}部门编码`) : callback()
    }
    return {
      form: {
        code: '', // 部门编码
        manager: '', // 部门负责人
        name: '', // 部门名称
        introduce: ''// 部门介绍
      },
      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: ['change', 'blur'] },
          { min: 1, max: 50, message: '部门昵称要求1-50个字符', trigger: ['change', 'blur'] },
          // 自定义校验
          { validator: validateName, trigger: ['change', 'blur'] }
        ],
        code: [
          { required: true, message: '部门编码不能为空', trigger: ['change', 'blur'] },
          { min: 1, max: 20, message: '部门编码要求1-20个字符', trigger: ['change', 'blur'] },
          { validator: validateCode, trigger: ['change', 'blur'] }
        ],
        manager: [
          { required: true, message: '部门负责人不能为空', trigger: ['change', 'blur'] }
        ],
        introduce: [
          { required: true, message: '部门介绍不能为空', trigger: ['change', 'blur'] }
        ]
      },
      simpleList: [], // 部门负责人列表
      title: '添加部门',
      loading: true
    }
  },
  created() {
    this.GetSimpleList()
  },
  methods: {
    // 获取部门负责人列表
    async GetSimpleList() {
      const { data } = await reqGetSimpleList()
      this.simpleList = data
    },
    // 点击提交表单，新增部门
    submitForm() {
      this.$refs.form.validate(async boo => {
        if (boo) {
          if (this.form.id) {
            // 更新部门请求
            await reqUpdeteDept(this.form)
          } else {
            // 调用接口,新增部门请求
            await reqAddDept({ ...this.form, pid: this.deptsList.id })
          }
          this.$emit('sloseDialog')
          this.form = {
            code: '', // 部门编码
            manager: '', // 部门负责人
            name: '', // 部门名称
            introduce: ''// 部门介绍
          }
        } else {
          return false
        }
      })
    },
    // 点击取消
    centerDialogVisible() {
      this.$emit('update:visible', false)
      this.$refs.form.resetFields()
      this.form = {
        code: '', // 部门编码
        manager: '', // 部门负责人
        name: '', // 部门名称
        introduce: ''// 部门介绍
      }
    },
    // 获取部门信息的方法
    async getDeptInFo(id) {
      const { data } = await reqGetDeptInfoByID(id)
      this.form = data
      this.loading = false
    }
  }
}
</script>

<style>

</style>
